<template>
  <div class="app-container">
    <!-- 页面标题 -->
    <el-row :gutter="20" class="mb8">
      <el-col :span="24">
        <h3>景点交易数据趋势分析</h3>
      </el-col>
    </el-row>

    <!-- 统计卡片 -->
    <el-row :gutter="20" class="mb20">
      <el-col :span="6">
        <el-card>
          <div class="kpi">
            <p>总成交金额</p>
            <h4>679 万</h4>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="kpi">
            <p>总退款金额</p>
            <h4>125 万</h4>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="kpi">
            <p>净收入</p>
            <h4>554 万</h4>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="kpi">
            <p>同比增幅</p>
            <h4>+12.5%</h4>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表控制区域 -->
    <el-row :gutter="20" class="mb20">
      <el-col :span="12">
        <el-radio-group v-model="chartType" size="small" @change="changeChartType">
          <el-radio-button label="line">折线图</el-radio-button>
          <el-radio-button label="column">柱状图</el-radio-button>
          <el-radio-button label="area">面积图</el-radio-button>
        </el-radio-group>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <div class="charts-box">
      <qiun-vue-ucharts
          :type="chartType"
          :opts="opts"
          :chartData="chartData"
      />
    </div>

    <!-- 数据表格 -->
    <el-row :gutter="20" class="mt20">
      <el-col :span="24">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="year" label="年份"></el-table-column>
          <el-table-column prop="dealAmount" label="成交金额（万）"></el-table-column>
          <el-table-column prop="refundAmount" label="退款金额（万）"></el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ref, onMounted, computed } from 'vue';
import qiunVueUcharts from '@qiun/vue-ucharts';

export default {
  components: {
    qiunVueUcharts
  },
  setup() {
    const chartData = ref({});
    const chartType = ref('line');
    const timeRange = ref('all');

    const opts = ref({
      color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
      padding: [15, 10, 0, 15],
      enableScroll: false,
      legend: {},
      xAxis: {
        disableGrid: true
      },
      yAxis: {
        gridType: "dash",
        dashLength: 2
      },
      extra: {
        line: {
          type: "straight",
          width: 2,
          activeType: "hollow"
        }
      }
    });

    // 表格数据
    const tableData = ref([
      { year: '2018', dealAmount: 100, refundAmount: 30 },
      { year: '2019', dealAmount: 80, refundAmount: 25 },
      { year: '2020', dealAmount: 95, refundAmount: 8 },
      { year: '2021', dealAmount: 150, refundAmount: 37 },
      { year: '2022', dealAmount: 112, refundAmount: 4 },
      { year: '2023', dealAmount: 132, refundAmount: 20 }
    ]);

    // 获取服务器数据
    const getServerData = () => {
      setTimeout(() => {
        const res = {
          categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
          series: [
            {
              name: "退款金额（万）",
              data: [30, 25, 8, 37, 4, 20]
            },
            {
              name: "成交金额（万）",
              data: [100, 80, 95, 150, 112, 132]
            }
          ]
        };
        chartData.value = JSON.parse(JSON.stringify(res));
      }, 500);
    };

    // 切换图表类型
    const changeChartType = (type) => {
      opts.value.extra.line.type = type === 'area' ? 'curveArea' : 'straight';
    };

    // 筛选数据
    const filterDataByTime = (range) => {
      let filteredCategories = [];
      let filteredSeries = chartData.value.series.map(s => ({ ...s }));

      const years = chartData.value.categories;

      filteredSeries.forEach(series => {
        series.data = series.data.slice(years.length - filteredCategories.length);
      });

      chartData.value = {
        categories: filteredCategories,
        series: filteredSeries
      };
    };

    onMounted(() => {
      getServerData();
    });

    return {
      chartData,
      opts,
      chartType,
      timeRange,
      tableData,
      changeChartType,
      filterDataByTime
    };
  }
};
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.mb8 {
  margin-bottom: 8px;
}

.mb20 {
  margin-bottom: 20px;
}

.mt20 {
  margin-top: 20px;
}

.kpi {
  text-align: center;
}

.kpi p {
  font-size: 14px;
  color: #666;
}

.kpi h4 {
  margin-top: 10px;
  font-size: 20px;
  color: #333;
}

.charts-box {
  width: 100%;
  height: 400px;
}
</style>
